<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情Demo</title>
    
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="user-menu">
                        <ul>
                            <li><a href="#"><i class="fa fa-user"></i> 我的用户</a></li>
                            <li><a href="#"><i class="fa fa-heart"></i> 商品信息</a></li>
                            <li><a href="cart.html"><i class="fa fa-user"></i>购物车</a></li>
                            <li><a href="checkout.html"><i class="fa fa-user"></i> 注册</a></li>
                            <li><a href="#"><i class="fa fa-user"></i> 登陆</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End header area -->
                
    
    <div class="site-branding-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="logo">
                        <h1><a href="./"><img src="img1/logo.jpg"></a></h1>
                    </div>
                </div>             
                <div class="col-sm-6">
                    <div class="shopping-item">
                        <a href="cart.html">购物车 <span class="cart-amunt">￥36</span> <i class="fa fa-shopping-cart"></i> <span class="product-count">1</span></a>
                    </div>
                </div>
           </div>
        </div>
    </div> <!-- End site branding area -->
    
     <div class="mainmenu-area">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div> 
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="shop.html">商品</a></li>
                        <li><a href="single-product.html">商品信息</a></li>
                        <li class="active"><a href="cart.html">购物车</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
					    <li><a href="#">Category</a></li>
                        <li><a href="#">Others</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
				    <div class="single-sidebar">
                         <form action="#">
						    <input type="text" placeholder="Search products...">
                            <input type="submit" value="搜索">
                         </form>
                    </div> 
				</div>  
				<div id="box">
                </div>
            </div>
        </div>
    </div> <!-- End mainmenu area -->

    <div class="product-big-title-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-bit-title text-center">
                        <h2>商品详情</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="single-product-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">              
                <div class="col-md-8">
                    <div class="product-content-right">					                   
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="product-images">
                                    <div class="product-main-img">
                                        <img src="img1/product-thumb-3.jpg" alt="">
                                    </div>
									<div class="product-gallery">
                                       <img src="img1/product-1.png" alt="">
                                       <img src="img1/product-2.png" alt="">
                                       <img src="img1/product-3.png" alt="">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-sm-6">
                                <div class="product-inner">
                                    <h2 class="product-name">你是人间的四月天</h2>
                                    <div class="product-inner-price">
                                        <ins>￥36.00</ins> <del>￥40.00</del>
                                    </div>    
                                    <form action="" class="cart">
                                        <div class="quantity">
                                            <input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" min="1" step="1">
                                        </div>
                                        <button class="add_to_cart_button" type="submit">加入购物车</button>
                                    </form> 
                                    
                                    <div role="tabpanel">
                                        <ul class="product-tab" role="tablist">
                                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">描述</a></li>
                                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">评价</a></li>
                                        </ul>
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane fade in active" id="home">
                                                <h2>书籍简介</h2>  
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;本书是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特。诗歌尤多，其诗作融入中国古典诗歌和西方唯美派的 一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说她的文字拥有超过时间的魅力，笔下流露出令人惊讶的对民间百态的深谙。</p>
                                                <p>&nbsp;&nbsp;&nbsp;&nbsp;《你是人间的四月天》的一至四节句式结构基本相同，形成复沓，构成对称的乐章，将心中的爱以一幅幅四月天丰美的画面作比，节奏明快"排比的句式将画面连接，情感如水面涟漪层层叠叠荡漾起伏，作品不仅美而且易于吟咏，朗朗动人"诗的第五节/你是爱，是暖，是希望，/你是人间的四月天！”是收束的乐章，以抽象的爱、暖、希望来比喻心中的你，极尽盛赞，美不胜收“你是人间的四月天”与诗的开篇呼应，重复中有变化，诗情回旋而流转，毫无滞涩之感。</p>
                                            </div>
                                            <div role="tabpanel" class="tab-pane fade" id="profile">
                                                <h2>评价</h2>
                                                <div class="submit-review">
                                                    <p><label for="name">姓名</label> <input name="name" type="text"></p>
                                                    <p><label for="email">邮箱</label> <input name="email" type="email"></p>
                                                    <div class="rating-chooser">
                                                        <p>评分</p>

                                                        <div class="rating-wrap-post">
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                        </div>
                                                    </div>
                                                    <p><label for="review">评论</label> <textarea name="review" id="" cols="30" rows="10"></textarea></p>
                                                    <p><input type="submit" value="提交"></p>
                                               </div>
                                           </div>
                                      </div>
                                  </div>                                   
                               </div>
                            </div>
                        </div>                                
                    </div>
               </div>
           </div>                    
       </div>
  </div>



      <div class="footer-top-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="footer-about-us">
                        <h2>u<span>关于我们</span></h2>
                        <p>书是人类进步的阶梯</p>
                        <div class="footer-social">
                            <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">购物指南</h2>
                        <ul>
                            <li><a href="#">购物流程</a></li>
                            <li><a href="#">发票制度</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">会员优惠</a></li>
                        </ul>                        
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">支付方式</h2>
                        <ul>
                            <li><a href="#">货到付款</a></li>
                            <li><a href="#">网上支付</a></li>
                            <li><a href="#">礼品卡支付</a></li>
                            <li><a href="#">银行转账</a></li>
                            <li><a href="#">支付宝</a></li>
                        </ul>                        
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="footer-newsletter">
                        <h2 class="footer-wid-title">你的建议</h2>
                        <p>告诉我们您的需求和期望</p>
                        <div class="newsletter-form">
                            <form action="#">
                                <input type="email" placeholder="你的心里话">
                                <input type="submit" value="提交">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End footer top area -->

   
    <!-- Latest jQuery form server -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    
    <!-- Bootstrap JS form CDN -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
    <!-- jQuery sticky menu -->
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.sticky.js"></script>
    
    <!-- jQuery easing -->
    <script src="js/jquery.easing.1.3.min.js"></script>
    
    <!-- Main Script -->
    <script src="js/main.js"></script>
  </body>
</html>